<template>
  <el-container class="mailList">
    <el-aside style="float: left;width: 280px;">
      <el-card class="box-card el-card-flex">
        <div slot="header" class="clearfix"></div>
        <div class="text item el-over-auto">
          <el-tree
            :props="props"
            :load="loadNode1"
            lazy
          >
          </el-tree>
        </div>
      </el-card>
    </el-aside>
    <el-main style="padding: 0 0 0 10px;">
      <el-aside style="float: left;width: 220px;">
        <el-card class="box-card el-card-flex">
          <div slot="header" class="clearfix">
            <el-input
              v-model="searchValue"
              placeholder="请输入姓名/编码/电话"
              suffix-icon="el-icon-search"
            ></el-input>
          </div>
          <ul class="text item el-over-auto mid-panel">
            <li class="el-box panel" v-for="o in 4" :key="o">
              <img src="../../../assets/img/avatar.png" alt="" style="width: 40px;height: 40px; margin-top: 5px;">
              <div class="listRightPart">
                <span class="name">张三/1203068</span>
                <span class="dept">12212123423</span>
              </div>
            </li>
          </ul>
        </el-card>
      </el-aside>
      <el-main style="padding: 0 0 0 10px;">
        <div class="el-full el-box-column">
          <div class="el-card-flex userInfo">
            <span class="userName">张三(男)共享业务服务部/1201239</span>
            <el-form :model="formUserInfo" ref="formUserInfo" class="formInfo">
              <el-form-item label="">
                <img src="../../../assets/img/avatar.png" alt="" style="width: 120px; height: 120px; margin-left: 6px;">
              </el-form-item>
              <el-form-item label="" label-width="10px">
                <el-button type="text">邮件</el-button>
                <el-button type="text">信息</el-button>
                <el-button type="text">通知</el-button>
              </el-form-item>
              <el-form-item label="岗位:" label-width="50px">
                <p>{{'开发工程师'}}</p>
              </el-form-item>
              <el-form-item label="职级:" label-width="50px">
                <p>{{'初级'}}</p>
              </el-form-item>
            </el-form>
            <el-tabs class="el-tabs-bg el-flex el-tabs-flex tabs" v-model="activeName" @tab-click="handleClick">
              <el-tab-pane class="el-flex el-box-column el-over-auto" label="基本信息" name="first">
                <el-form :model="basicInformation" ref="basicInformation" label-width="100px" class="formUserInfo">
                  <el-form-item label="身份证号:" prop="IdNumber">
                    <el-col :span="18">
                      <!-- <el-input type="text" v-model="basicInformation.IdNumber" :rows="2" placeholder="请输入身份证号"></el-input> -->
                      <p>{{'38989482398492'}}</p>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="出生日期:" prop="birthDate">
                    <el-col :span="18">
                      <!-- <el-input type="text" v-model="basicInformation.birthDate" :rows="2" placeholder="请输入出生日期"></el-input> -->
                      <p>{{'1992-1-3'}}</p>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="民族:" prop="national">
                    <el-col :span="18">
                      <!-- <el-input type="text" v-model="basicInformation.national" :rows="2" placeholder="请输入出生日期"></el-input> -->
                      <p>{{'汉'}}</p>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="政治面貌:" prop="politicalLandscape">
                    <el-col :span="18">
                      <!-- <el-input type="text" v-model="basicInformation.politicalLandscape" :rows="2" placeholder="请输入出生日期"></el-input> -->
                      <p>{{'党员'}}</p>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="入党日期:" prop="thePartyDate">
                    <el-col :span="18">
                      <!-- <el-input type="text" v-model="basicInformation.thePartyDate" :rows="2" placeholder="请输入出生日期"></el-input> -->
                      <p>{{'1993-3-3'}}</p>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="员工类型:" prop="employeeType">
                    <el-col :span="18">
                      <!-- <el-input type="text" v-model="basicInformation.employeeType" :rows="2" placeholder="请输入出生日期"></el-input> -->
                      <p>{{'在编'}}</p>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="员工状态:" prop="employeeStatus">
                    <el-col :span="18">
                      <!-- <el-input type="text" v-model="basicInformation.employeeStatus" :rows="2" placeholder="请输入出生日期"></el-input> -->
                      <p>{{'在岗'}}</p>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="参加工作日期:" prop="employmentDate">
                    <el-col :span="18">
                      <!-- <el-input type="text" v-model="basicInformation.employmentDate" :rows="2" placeholder="请输入出生日期"></el-input> -->
                      <p>{{'2018-11-01'}}</p>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="手机号:" prop="phoneNumber">
                    <el-col :span="18">
                      <!-- <el-input type="text" v-model="basicInformation.phoneNumber" :rows="2" placeholder="请输入出生日期"></el-input> -->
                      <p>{{'1243545343'}}</p>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="邮箱:" prop="email">
                    <el-col :span="18">
                      <!-- <el-input type="text" v-model="basicInformation.email" :rows="2" placeholder="请输入出生日期"></el-input> -->
                      <p>{{'98492@163.com'}}</p>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="固定电话:" prop="telephone">
                    <el-col :span="18">
                      <!-- <el-input type="text" v-model="basicInformation.telephone" :rows="2" placeholder="请输入出生日期"></el-input> -->
                      <p>{{'734237'}}</p>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="开户银行:" prop="telephone">
                    <el-col :span="18">
                      <!-- <el-input type="text" v-model="basicInformation.telephone" :rows="2" placeholder="请输入出生日期"></el-input> -->
                      <p>{{'北京朝阳区xx银行'}}</p>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="银行账号:" prop="bankAccount">
                    <el-col :span="18">
                      <!-- <el-input type="text" v-model="basicInformation.bankAccount" :rows="2" placeholder="请输入出生日期"></el-input> -->
                      <p>{{'32423534534543544'}}</p>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="家庭住址:" prop="homeAddress">
                    <el-col :span="18">
                      <!-- <el-input type="text" v-model="basicInformation.homeAddress" :rows="2" placeholder="请输入出生日期"></el-input> -->
                      <p>{{'北京朝阳'}}</p>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="籍贯:" prop="nativePlace">
                    <el-col :span="18">
                      <!-- <el-input type="text" v-model="basicInformation.nativePlace" :rows="2" placeholder="请输入出生日期"></el-input> -->
                      <p>{{'北京'}}</p>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="现居住地:" prop="latter">
                    <el-col :span="18">
                      <!-- <el-input type="text" v-model="basicInformation.latter" :rows="2" placeholder="请输入出生日期"></el-input> -->
                      <p>{{'北京'}}</p>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="婚姻状况:" prop="maritalStatus">
                    <el-col :span="18">
                      <!-- <el-input type="text" v-model="basicInformation.maritalStatus" :rows="2" placeholder="请输入出生日期"></el-input> -->
                      <p>{{'未婚'}}</p>
                    </el-col>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane class="el-flex el-box-column el-over-auto" label="员工考情" name="second">
                  <div class="attendance">
                    <span>我的考勤</span>
                    <el-button type="text" style="float: right;" @click="moreDate">更多 ></el-button>
                  </div>
                  <el-calendar v-model="value"></el-calendar>
              </el-tab-pane>
              <el-tab-pane class="el-flex el-box-column" label="培训计划" name="third">
                <el-form :inline="true" :model="trainingPlan" ref="trainingPlan" class="demo-form-inline" label-width="100px">
                  <el-form-item label="">
                    <el-input clearable v-model="textSearch" placeholder="请输入系统编码/名称" style="width:240px;">
                      <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="advancedQuery">
                      高级查询
                      <i class="el-icon-magic-stick"></i>
                    </el-button>
                  </el-form-item>
                </el-form>
                <div class="el-flex el-box-column">
                  <el-table
                    :data="tableData"
                    border
                    stripe
                    style="width: 100%; margin-bottom: 50px"
                    ref="mailTable"
                  >
                    <el-table-column type="index" width="50" sortable :show-overflow-tooltip="true" label="序号" align="center"></el-table-column>
                    <el-table-column min-width="120px" sortable :show-overflow-tooltip="true" prop="code" label="申请单编号"></el-table-column>
                    <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="itemID" label="申请人"></el-table-column>
                    <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="itemID" label="课程名称"></el-table-column>
                    <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="itemID" label="主讲老师"></el-table-column>
                    <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="itemID" label="开始时间"></el-table-column>
                    <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="itemID" label="结束时间"></el-table-column>
                    <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="itemID" label="课程状态"></el-table-column>
                    <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="itemID" label="培训对象"></el-table-column>
                    <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="itemID" label="培训状态"></el-table-column>
                    <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="accessType" label="操作" align="center">
                      <template slot-scope="scope">
                        <el-button type="text" title="报名" v-show="!applyShow" @click="handleSignUp(scope.$index, scope.row)">报名</el-button>
                        <el-button type="text" title="报名" v-show="applyShow" @click="handleCancelSignUp(scope.$index, scope.row)">取消报名</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <!-- 分页 -->
                <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="0">
                </el-pagination>
              </el-tab-pane>
              <el-tab-pane class="el-flex el-box-column" label="员工履历" name="fourth">
                <span class="span">工作经历</span>
                <div class="el-flex el-box-column">
                   <el-table
                    :data="tableData"
                    border
                    stripe
                    style="width: 100%; margin-bottom: 50px"
                    ref="mailTable"
                    height="100%"
                  >
                    <el-table-column type="index" width="50" sortable :show-overflow-tooltip="true" label="序号" align="center"></el-table-column>
                    <el-table-column min-width="120px" sortable :show-overflow-tooltip="true" prop="code" label="公司名称"></el-table-column>
                    <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="itemID" label="所在部门"></el-table-column>
                    <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="itemID" label="职务"></el-table-column>
                    <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="itemID" label="开始日期"></el-table-column>
                    <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="itemID" label="结束日期"></el-table-column>
                    <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="itemID" label="工作职责"></el-table-column>
                    <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="itemID" label="工作业绩"></el-table-column>
                    <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="itemID" label="备注"></el-table-column>
                  </el-table>
                </div>
                <span class="span">项目经历</span>
                <div class="el-flex el-box-column">
                   <el-table
                    :data="tableData"
                    border
                    stripe
                    style="width: 100%; margin-bottom: 50px"
                    ref="mailTable"
                    height="100%"
                  >
                    <el-table-column type="index" width="50" sortable :show-overflow-tooltip="true" label="序号" align="center"></el-table-column>
                    <el-table-column min-width="120px" sortable :show-overflow-tooltip="true" prop="code" label="项目名称"></el-table-column>
                    <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="itemID" label="隶属公司"></el-table-column>
                    <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="itemID" label="开始日期"></el-table-column>
                    <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="itemID" label="结束日期"></el-table-column>
                    <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="itemID" label="项目描述"></el-table-column>
                    <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="itemID" label="项目职责"></el-table-column>
                    <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="itemID" label="使用技术"></el-table-column>
                    <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="itemID" label="项目业绩"></el-table-column>
                  </el-table>
                </div>
                <div class="el-flex el-box-column">
                  <span class="span">个人简历</span>
                  <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    multiple
                    :limit="3"
                    :on-exceed="handleExceed"
                    :file-list="fileList">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                  </el-upload>
                </div>
              </el-tab-pane>
              <el-tab-pane class="el-flex el-box-column" label="日程安排" name="five">
                <div class="attendance">
                  <span>日程安排</span>
                  <el-button type="text" style="float: right;" @click="moreDate">更多 ></el-button>
                </div>
                <el-calendar v-model="value"></el-calendar>
              </el-tab-pane>
          </el-tabs>
          </div>
        </div>
      </el-main>
    </el-main>
    <!-- 高级查询抽屉式弹框 -->
    <el-drawer
      title="高级查询"
      :visible.sync="dialogSearch"
      :before-close="searchClose"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
			:wrapperClosable="false"
      :close-on-press-escape="false"
    >
      <div class="demo-drawer__content el-box-column" style="height: 100%; margin-left: 6px;">
        <el-form label-width="100px" :model="trainingPlan" ref="trainingPlan" class="el-flex">
          <el-form-item label="开始日期:" prop="startTime">
            <el-col  :span="10">
              <el-date-picker :picker-options='startTime' @blur='blur' v-model="trainingPlan.startTime" type="date" placeholder="开始日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="结束日期:" prop="endTime">
            <el-col  :span="10">
              <el-date-picker :picker-options='endTime' @blur='blur' v-model="trainingPlan.endTime" type="date" placeholder="结束日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="培训状态:" prop="status">
             <el-select v-model="trainingPlan.status" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer" style="text-align: right; margin-bottom: 10px; padding-right:10px;">
          <el-button type="primary" @click="handleSearchSure">
            确定
            <i class="el-icon-document-checked el-icon--right"></i>
          </el-button>
          <el-button @click="handleSearchClose(false)">
            取消
            <i class="el-icon-refresh-left"></i>
          </el-button>
        </div>
      </div>
    </el-drawer>
    <!-- 查看报名 -->
    <el-dialog
      title="培训信息"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      class="demo-radius demo-ruleForm el-over-auto"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form :model="formUserInfo" ref="formUserInfo" label-width="100px">
        <el-form-item label="组织:" prop="IdNumber">
          <el-col :span="18">
            <p>{{'38989482398492'}}</p>
          </el-col>
        </el-form-item>
        <el-form-item label="部门:" prop="birthDate">
          <el-col :span="18">
            <p>{{'1992-1-3'}}</p>
          </el-col>
        </el-form-item>
        <el-form-item label="课程名称:" prop="national">
          <el-col :span="18">
            <p>{{'汉'}}</p>
          </el-col>
        </el-form-item>
        <el-form-item label="培训课程编码:" prop="politicalLandscape">
          <el-col :span="18">
            <p>{{'党员'}}</p>
          </el-col>
        </el-form-item>
        <el-form-item label="培训地点:" prop="thePartyDate">
          <el-col :span="18">
            <p>{{'1993-3-3'}}</p>
          </el-col>
        </el-form-item>
        <el-form-item label="开始日期:" prop="employeeType">
          <el-col :span="18">
            <p>{{'在编'}}</p>
          </el-col>
        </el-form-item>
        <el-form-item label="结束日期:" prop="employeeStatus">
          <el-col :span="18">
            <p>{{'在岗'}}</p>
          </el-col>
        </el-form-item>
        <el-form-item label="报名结束日期:" prop="employmentDate">
          <el-col :span="18">
            <p>{{'2018-11-01'}}</p>
          </el-col>
        </el-form-item>
        <el-form-item label="培训对象:" prop="phoneNumber">
          <el-col :span="18">
            <p>{{'1243545343'}}</p>
          </el-col>
        </el-form-item>
        <el-form-item label="主讲老师:" prop="email">
          <el-col :span="18">
            <p>{{'98492@163.com'}}</p>
          </el-col>
        </el-form-item>
        <el-form-item label="考核方式:" prop="telephone">
          <el-col :span="18">
            <p>{{'734237'}}</p>
          </el-col>
        </el-form-item>
        <el-form-item label="课程介绍:" prop="telephone">
          <el-col :span="18">
            <p>{{'北京朝阳区xx银行'}}</p>
          </el-col>
        </el-form-item>
        <el-form-item label="附件:" prop="bankAccount">
          <el-col :span="18">
            <p>{{'32423534534543544'}}</p>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" style="text-align:right;width:100%;display:inline-block">
        <el-button type="primary" @click="handleSure">报名 <i class="el-icon-document-checked el-icon--right"></i></el-button>
        <el-button type="danger" @click="handleCheck(false)">关闭 <i class="el-icon-close"></i></el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import {
  Tree,
  Dialog,
  Table,
  TableColumn,
  Pagination,
  MessageBox,
  Message,
  Tabs,
  TabPane,
  Calendar,
  Upload,
  Drawer
} from 'element-ui'
export default {
  name: 'mailList',
  components: {
    'el-tree': Tree, // 树形菜单
    'el-dialog': Dialog, // 对话框
    'el-table': Table, // 表格
    'el-table-column': TableColumn, // 表格列
    'el-pagination': Pagination, // 分页
    'el-tabs': Tabs, // 标签
    'el-tab-pane': TabPane, // 标签页
    'el-calendar': Calendar, // 日历
    'el-upload': Upload, // 上传附件
    'el-drawer': Drawer // 抽屉弹框
  },
  data() {
    return {
      activeName: 'third',
      props: {
        label: 'name',
        children: 'zones',
        isLeaf: 'leaf'
      },
      searchValue: '', // 搜索默认值
      basicInformation: {}, // 基本信息表单信息
      formUserInfo: {}, // 表单信息
      value: new Date(), // 我的考勤日历
      trainingPlan: {}, // 培训计划表单
      options: [
        {
          value: '1',
          label: '未报名'
        }, {
          value: '2',
          label: '已报名'
        }
      ],
      tableData: [
        {
          code: '02162019-00450'
        }
      ],
      currentPage: 1, // 当前展示的页数
      pageSize: 20, // 每页显示多少条
      fileList: [ // 上传附件列表
        {
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        },
        {
          name: 'food2.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }
      ],
      textSearch: '', // 模糊查询字段
      dialogSearch: false, // 高级查询弹框
      formInline: {}, // 高级查询表单
      dialogVisible: false, // 查看报名
      applyShow: '', // 显示隐藏报名取消报名
      //开始时间不能早于今天
      startTime: {
        disabledDate: time => {
          if (this.trainingPlan.endTime) {
            return (
              time.getTime() > new Date(this.trainingPlan.endTime).getTime()//不能选择的时间值
            )
          }
        }
      },
      // 结束时间不能早于开始时间
      endTime: {
        disabledDate: time => {
          if (this.trainingPlan.startTime){
            return (
              time.getTime() < new Date(this.trainingPlan.startTime).getTime() - 8.64e7 // 加- 8.64e7则表示包当天
            )
          } 
        }
      }
    }
  },
  created() {
    this.getTime()
    window.onresize = () => {
      this.$refs.mailTable.doLayout()
    }
  },
  methods: {
    //获取本地当前时间
    getTime(){
      var date = new Date()
      var year =  date.getFullYear()
      var month =  date.getMonth()+1
      var strDate =  date.getDate()
      if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
      if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
      }
    },
    //计算两个时间段中间有多少天
    blur(){
      var star = this.trainingPlan.startTime
      var end = this.trainingPlan.endTime
      var date1=new Date(star)
      var date2=new Date(end)
      var date=(date2.getTime()-date1.getTime())/(1000*60*60*24)+1;/*不用考虑闰年否*/
    },
    // 获取树形结构数据
    loadNode1 (node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: 'region' }])
      }
      if (node.level > 1) return resolve([])
      setTimeout(() => {
        const data = [{
          name: 'leaf',
          leaf: true
        }, {
          name: 'zone'
        }]

        resolve(data)
      }, 500)
    },
    // 切换标签页事件
     handleClick (tab, event) {
      console.log(tab, event);
    },
    // 改变每页的条数事件
    handleSizeChange (val) {},
    // 切换当前页时触发的事件
    handleCurrentChange (val) {},
    // 附件列表移除附件时的钩子
    handleRemove (file, fileList) {
      console.log(file, fileList);
    },
    // 点击附件列表中已上传的文件时的钩子
    handlePreview (file) {
      console.log(file)
    },
    // 文件超出个数限制时的钩子
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    // 删除附件之前的钩子
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`)
    },
    // 点击员工考勤里的更多
    moreDate () {
      let dynamicRouting = [{
        path: '/thematicPortal',
        component: this.pageLayout,
        // meta: {
        //   title: '通讯录'
        // },
        component: () => import('@/views/layout/frame'),
        children: [
          {
            path: 'moreMailDate',
            name: 'moreMailDate',
            component: () => import('@/views/thematicPortal/mailList/moreMailDate'),
            meta: {
              title: '我的考勤'
            }
          }
        ],
      }]
      this.$router.addRoutes(dynamicRouting)
      this.$router.push({
        name: 'moreMailDate'
      })
    },
    // 点击高级查询触发弹框事件
    advancedQuery () {
      this.dialogSearch = true
    },
    // 高级查询关闭事件
    searchClose () {
      this.dialogSearch = false
    },
    // 高级查询确定事件
    handleSearchSure () {
      this.searchClose()
    },
     // 高级查询取消事件
    handleSearchClose () {
      this.searchClose()
    },
    // 查看报名信息
    handleSignUp () {
      this.dialogVisible = true
      this.applyShow = true
    },
    // 取消报名
    handleCancelSignUp () {
      this.applyShow = false
    },
    // 点击弹框里的关闭按钮事件
    handleClose () {
      this.dialogVisible = false
    },
    // 点击弹框里的报名按钮事件
    handleSure () {
      this.handleClose()
    },
    // 查看报名弹框的取消事件
    handleCheck () {
      this.handleClose()
      this.applyShow = false
    }
  }
}
</script>
<style lang="scss" scope>
.mailList {
  .userInfo{
    position: relative;
    .userName{
      color: #409eff;
      position: absolute;
      top: 10px;
      left: 10px;
    }
    .formInfo {
      display: inline-block;
      padding: 10px 10px 0;
      position: absolute;
      top: 40px;
    }
    .tabs{
      .el-tabs__nav-scroll{
        float: right;
        margin-left: 150px;
      }
      .el-tabs__content{
        border-left:  2px solid #f5f7f9;
        margin-left: 150px;
        .attendance {
          border-bottom: 2px solid #f5f7f9;
        }
        .span{
          margin-bottom: 10px;
        }
      }
      .formUserInfo{
        margin-left: 80px;
        // .el-form-item {
        //   margin-bottom: 0;
        // }
      }
    }
  }
  .mid-panel {
    .panel {
      padding: 15px 0 0 20px;
      height: 60px;
      .listRightPart {
        display: inline-block;
        padding-left: 10px;
        vertical-align: middle;
        .name{
          font-size: 12px;
          color: #333333;
        }
        .dept{
          font-size: 12px;
          color: #9e9e9e;
        }
      }
      &:hover{
        cursor: pointer;
        background-color: #f7f7f7;
      }
    }
  }
}
</style>
